<template>
  <view class="main" >
    <view v-if="isLogin">
      <view class="top-msg" @click="handleToDetail">
        <view>查看我的订单返现明细</view>
        <view class="iconfont icon-more" ></view>
      </view>
      <view class="header">
        <view class="header-count">
          <view class="header-count-item">
            <view class="val">{{queryResult.totalReceivedAmount}}</view>
            <view class="tit">累计提现金额</view>
            <image class="img" mode="widthFix" src="@/static/images/widthdraw_mine2.png" />
          </view>
          <view  class="header-count-item">
            <view class="val">{{queryResult.totalWaitAmount}}</view>
            <view class="tit">排队中总金额</view>
            <image class="img" mode="widthFix" src="@/static/images/widthdraw_mine1.png" />
          </view>
        </view>
      </view>
      <view class="page-content">

        <view class="tabs" v-if="false">
          <u-tabs
              :list="nvaList"
              :scrollable="false"
              lineWidth="188rpx"
              lingHeight="1rpx"
              lineColor="#FF8F1F"
              :itemStyle="{
              height: '100rpx'
            }"
              :activeStyle="{
              color: '#FF8F1F',
              fontWeight: 500,
            }"
              :inactiveStyle="{
              color: '#333',
              fontSize: '28rpx',
            }"
              @click="handleTab"
          ></u-tabs>
        </view>
        <view class="list"  v-for="(item, index) in queryResult.list" :key="index"  >
          <view class="infos">
            <view class="text price">￥<text class="price-num">{{item.withdrawAmount}}</text></view>
            <view class="text"><text class="text-status" :class="{'success' : item.status === 2}">{{ item.status  === 1 ? '排队中' : '提现成功'}}</text></view>
          </view>
          <view class="infos">
            <view class="text"> 申请时间： {{item.createTime.substr(0,16)	}} </view>
            <view class="text" v-if="item.status === 2"> 返现时间 {{item.finishTime?.substr(0,16)	}} </view>
            <view class="text" v-else> 前方还有 <text class="item-order">{{ item.order }}</text>人待提现 </view>
          </view>
        </view>

        <Empty v-if="queryResult.isQueryed && !queryResult.list.length" />
      </view>
    </view>
    
    <Login />
    <TabbarWithdraw />
  </view>
</template>

<script setup>
import { reactive, ref, computed , watch} from 'vue'
import { useStore } from 'vuex'
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { userWithdrawMyListApi, userWithdrawMyStatisticsApi } from '@/api/user'
import Detailed from "@/components/detailed/detailed.vue";
import TabbarWithdraw from '@/components/tabbar/TabbarWithdraw.vue';
const store = useStore()
const nvaList = ref([
  {
    name: '全部',
    value: ''
  },
  {
    name: '排队中',
    value: 1
  },
  {
    name: '已打款',
    value: 2
  },
])
const queryResult = reactive({
  isLast: false,
  isQueryed: false,
  totalReceivedAmount: 0,
  totalWaitAmount: 0,
  list: []
})
const queryData = reactive({
  page: 1,
  size: 10,
  status: nvaList.value[0].value
})
const isLogin = computed(()=> {
  return store.state.user.isLogin
})
watch(
  () => isLogin.value,
  (v) => {
    v && init()
  },
);
onLoad(()=> {
  // store.dispatch('user/getUserBonusCount')
  init()
})
onReachBottom(()=> {
  loadNextPage()
})
async function loadNextPage(){
  if(queryResult.isLast) {
    return
  }
  queryData.page += 1;
  getListData()
}
async function init() {
  queryData.page = 1;
  queryResult.isLast = false
  await getListData()
  userWithdrawMyStatistics()
}
function userWithdrawMyStatistics() {
  userWithdrawMyStatisticsApi().then((res)=> {
    queryResult.totalReceivedAmount = res.totalReceivedAmount
    queryResult.totalWaitAmount = res.totalWaitAmount
  })
}
function handleTab(e) {
  queryData.status = e.value
  init()
}
async function getListData(){
  if(queryResult.isLast) {
    return
  }
  uni.showLoading()
  const res = await userWithdrawMyListApi({...queryData}).finally(()=> {
    uni.hideLoading()
    setTimeout(()=>{
      queryResult.isQueryed = true
    })
  })
  if(queryData.page === 1) {
    queryResult.list = [...res.items]
  } else {
    queryResult.list.push(...res.items)
  }
  queryResult.isLast = queryResult.list.length === res.total
  
}
function handleToDetail(){
  uni.navigateTo({
    url: '/subpkgs/mine/detailed/bonus'
  })
}
</script>

<style lang='scss' scoped>
.main{
  min-height: 100vh;
  background-color: #F4F6F8;
  padding-bottom: 100rpx;
  .top-msg{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72rpx;
    background: #CDE1FD;
    padding: 0 32rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #3662EC;
    .iconfont{
      color: #3662EC;
    }
  }
  .header{
    width: 750rpx;
    background: #fff;
    margin-bottom: 20rpx;
    .header-count{
      display: flex;
      height: 200rpx;
      padding: 24rpx 32rpx 20rpx 32rpx;
      gap: 24rpx;
      .header-count-item{
        flex: 1;
        padding: 24rpx 32rpx 0 32rpx;
        background-size: contain;
        position: relative;
        .img{
          position: absolute;
          top:50%;
          right: 24rpx;
          width: 87rpx;
          transform: translateY(-50%);
          z-index: 1;
        }
        &:first-child{
          background-image: url('https://oss.cqxzx.com/355145e3effb450d59e473ed33259e85.png?Expires=2036426880&OSSAccessKeyId=LTAI5t5a98jUcHvqdxwzahgm&Signature=7NVaHKGA7k102wnKOqP8vjOBLsw%3D');
        }
        &:last-child{
          background-image: url('https://oss.cqxzx.com/71a7e6678f403df43ec371b059ca8c1e.png?Expires=2036426826&OSSAccessKeyId=LTAI5t5a98jUcHvqdxwzahgm&Signature=%2FdsI9DDgStAIw46lc%2BcjIUXc7JU%3D');
        }
        .tit{
          font-weight: 400;
          font-size: 24rpx;
          color: #FFFFFF;
          line-height: 32rpx;
        }
        .val{
          font-weight: bold;
          font-size: 48rpx;
          color: #FFFFFF;
          line-height: 72rpx;
          margin-bottom: 4rpx;
        }
      }
    }
  }
  .page-content{
    .list{
      padding: 32rpx;
      background: #fff;
      display: flex;
      flex-direction: column;
      gap: 24rpx;
      margin-bottom: 20rpx;
      &:last-child{
        border-bottom: none;
      }
      .withdraw-amount{
        margin-bottom: 10rpx;
        color: #666;
      }
      .infos{
        display: flex;
        justify-content: space-between;
        font-weight: 400;
        font-size: 24rpx;
        color: #333;
        line-height: 32rpx;
        .price{
          font-weight: bold;
          font-size: 24rpx;
          color: #FA5151;
          line-height: 36rpx;
          .price-num{
            font-size: 48rpx
          }
        }
        .text-status{
          font-weight: 400;
          font-size: 24rpx;
          color: #FF8F1F;
          line-height: 36rpx;
          &.success{
            color: #07B9B9;
          }
        }
        .item-order{
          color: #3662EC;
          padding: 0 8rpx;
        }
        
      }
    } 
  }

}
</style>
